import React, { Component } from 'react';
import { Form, Input, Icon, Button, Spin, message } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import 'antd/dist/antd.css';
import styles from "./styles.css";

const FormItem = Form.Item;

class Login extends Component {

  constructor(props) {
    super(props);

    this.formstyle = {
      width: "300px",
      height: "200px",
      position: "absolute",
      left: "50%",
      top: "40%",
      margin: "-100px 0 0 -150px "
    }
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.dispatch({
          type: 'Login/login',
          data: {
            LoginName: values.username,
            PassWord: values.password,
          },
        }).then((res) => {
          if (res.RESULT) {
            router.push('/Home');
            //.push({ pathname: '/Home', key1:"1234", state: { price: 18 } });
          } else {
            message.error("登录失败")
          }
        });
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div style={this.formstyle}>
        <Spin spinning={this.props.loading}>
          <Form onSubmit={this.handleSubmit}>
            <h2 style={{ textAlign: "center" }}>登录页面</h2>
            <FormItem hasFeedback>
              {
                getFieldDecorator('username', {
                  rules: [
                    {
                      required: true,
                      message: '用户名不能为空',
                    }, {
                      min: 4,
                      max: 12,
                      message: '长度必须控制在在4-12范围内',
                    },
                  ],
                })(
                  <Input placeholder={'用户名'} prefix={<Icon type={'user'} />} />,
                )}
            </FormItem>
            <FormItem hasFeedback>
              {
                getFieldDecorator('password',
                  {
                    rules: [
                      {
                        required: true,
                        message: '密码不能为空',
                      }, {
                        min: 6,
                        max: 16,
                        message: '密码长度必须控制在6-16范围内'
                      },
                    ],
                  },
                )(
                  <Input type={'password'} placeholder={'密码'} prefix={<Icon type={'lock'} />} />,
                )
              }
            </FormItem>
            <Button className={styles.login_button} type={'primary'} htmlType={'submit'}> 登录</Button>
            <Button className={styles.register_button} type={'primary'} onClick={this.props.onclick}>注册</Button>
          </Form>
        </Spin>
      </div>
    );
  }
}

export default connect(
  ({ loading, routing }) => {
    return {
      loading: !!loading.models.Login
    };
  }
  , null)(Form.create({})(Login));

